﻿@model WebDuLichDev.Models.HotelInfo

@{
    ViewBag.Title = "UpdateHotel";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="text-align: center">
    <h2>@Resources.Language.UpdateHotel</h2>
</div>

<form id="frmUpdateHotel" class="well form-horizontal" method="post" action="/Hotel/UpdateHotel">
    <input name="hotelinfo.dlPlace.ID" value="@Model.dlPlace.ID" type="hidden" />
    <input name="hotelinfo.dlHotelPlaceInfoDetail.ID" value="@Model.dlHotelPlaceInfoDetail.ID" type="hidden" />
    <div>

        <ul id="panelbar">
            <li class="k-state-active">
                <span class="k-link k-state-selected">@Resources.Language.BasicInfo</span>
                <div class="tabstrip">
                    <ul>
                        <li class="k-state-active">@Resources.Language.Introduce</li>
                        <li>@Resources.Language.DetailInfo</li>
                        <li>@Resources.Language.Note</li>
                    </ul>
                    <div>
                        <div class="control-group">
                            <label class="control-label" for="input01">@Resources.Language.PlaceName</label>
                            <div class="controls">
                                @Html.TextBoxFor(model => model.dlPlace.Name, new { Name = "hotelinfo.dlPlace.Name" })
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input01">@Resources.Language.Address</label>
                            <div class="controls">@Html.TextBoxFor(model => model.dlPlace.Address, new { id = "Address", placeholder = "Address...", required = "", validationMessage = "Please enter {0}", Name = "hotelinfo.dlPlace.Address" })</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input01">@Resources.Language.City</label>
                            <div class="controls">@Html.DropDownListFor(model => model.dlPlace.DL_CityId, WebDuLichDev.WebUtility.WebDuLichData.ListCity, new { Name = "hotelinfo.dlPlace.DL_CityId", id = "drop_CityList", @class = "DLL kendoDropDownList city" })</div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="input01">@Resources.Language.Avatar</label>

                            <div class="controls">
                                <input id="uploadAvatar" name="fileUpload" type="file" />
                                @Html.TextBoxFor(model => model.dlPlace.Avatar, new { Name = "hotelinfo.dlPlace.Avatar", id = "Avatar", type = "hidden", required = "", validationmessage = "Please upload {0}" })
                                <div id="imgPhotoAvatar">
                                    <div class="row">
                                        <div class="span8">
                                            <ul class="thumbnails">
                                                @if (null != Model && Model.dlPlace != null)
                                                {      
                                                    @:<li class="span2" id="@Model.dlPlace.Avatar"><a class=thumbnail><img src="/Data/Avatar/Place/@Model.dlPlace.Avatar" alt='' /></a></li>
                                            }
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div class="k-content">
                                <textarea class="editor" name="hotelinfo.dlHotelPlaceInfoDetail.Note" rows="5" cols="20" style="width: 100%; height: 400px">                  
                    @HttpUtility.HtmlDecode(Model.dlHotelPlaceInfoDetail.Note)       
                </textarea>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.RoomType)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.RoomType, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.RoomType" })
                        </div>
                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.OpenCloseTime)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.OpenCloseTime, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.OpenCloseTime" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.OpenCloseTime)
                        </div>
                        @* <div class="demo-section" style="width: 500px;">

                <label for="start">Start time:</label>
                <input id="start" value="8:00 AM" />

                <label for="end" style="margin-left:3em">End time:</label>
                <input id="end" value="8:30 AM"/>

            </div>*@
                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.Price)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.Price, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.Price" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.Price)
                        </div>

                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.PayType)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.PayType, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.PayType" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.PayType)
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <span class="">@Resources.Language.DetailInfo - @Resources.Language.Services - @Resources.Language.Contact</span>
                <div class="tabstrip">
                    <ul>
                        <li class="k-state-active">@Resources.Language.DetailInfo</li>
                        <li>@Resources.Language.Services</li>
                        <li>@Resources.Language.Contact</li>
                    </ul>
                    <div>
                        <div class="k-content">
                            @if (null != Model && Model.dlHotelPlaceInfoDetail.Info != null)
                            { 
                                <textarea class="editor" name="hotelinfo.dlHotelPlaceInfoDetail.Info" rows="5" cols="20" style="width: 100%; height: 400px">@HttpUtility.HtmlDecode(Model.dlHotelPlaceInfoDetail.Info)</textarea>
                            }
                            else
                            {
                                <textarea class="editor" name="hotelinfo.dlHotelPlaceInfoDetail.Info" rows="5" cols="20" style="width: 100%; height: 400px">&lt;p&gt;Please input some detail about this city:&lt;/p&gt;</textarea>
                   
                            }
                        </div>
                    </div>
                    <div>
                        <div class="k-content">
                            <textarea class="editor" name="hotelinfo.dlHotelPlaceInfoDetail.Service" rows="5" cols="20" style="width: 100%; height: 400px">                  
                   @HttpUtility.HtmlDecode(Model.dlHotelPlaceInfoDetail.Service)     
                </textarea>
                        </div>
                    </div>
                    <div>
                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.MobiPhone)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.MobiPhone, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.MobiPhone" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.MobiPhone)
                        </div>

                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.HomePhone)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.HomePhone, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.HomePhone" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.HomePhone)
                        </div>

                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.Fax)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.Fax, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.Fax" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.Fax)
                        </div>

                        <div class="control-label">
                            @Html.LabelFor(model => model.dlHotelPlaceInfoDetail.Email)
                        </div>
                        <div class="controls">
                            @Html.TextBoxFor(model => model.dlHotelPlaceInfoDetail.Email, new { Name = "hotelinfo.dlHotelPlaceInfoDetail.Email" })
                            @Html.ValidationMessageFor(model => model.dlHotelPlaceInfoDetail.Email)
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <span class="">@Resources.Language.ImagePlace</span>
                <div class="control-group">
                    <label class="control-label" for="input01">@Resources.Language.ImagePlace</label>
                    <div class="controls">
                        <input id="uploadImage" name="fileUpload" type="file" />
                        <div id="imageName">
                        </div>
                        <div id="imgPhotoPlace">
                            <div class="row">
                                <div class="span8">
                                    <ul class="thumbnails">
                                        <li>
                                            <div id="container">
                                                <span id="target" title="DoubleClick vào hình để chọn xóa hình!"></span>
                                            </div>
                                        </li>
                                        @if (null != Model && Model.listImagePlace != null)
                                        {
                                            int i = 0;
                                            foreach (var item in Model.listImagePlace)
                                            {     
                                            @:<li class="span2" id="@i">
<a class=thumbnail><img src="/Data/Images/place/@item.LinkImage" id="@i" alt='' ondblclick="onclickpicture(this.id)" onmousemove="onfocuspicture()" /></a>                           
                                            <input  name="hotelinfo.listImagePlace[@i].LinkImage" class="imagePlace" value="@item.LinkImage" type="hidden"/>
                                            <input  name="hotelinfo.listImagePlace[@i].ID" class="imagePlace" value="@item.ID" type="hidden"/>
                                            <input  name="hotelinfo.listImagePlace[@i].DL_PlaceID" class="imagePlace" value="@item.DL_PlaceID" type="hidden"/>
                                            @:</li>
                                                                                    i++;
                                            }
                                        }
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <div class="form-actions">
        <input class="btn btn-primary" id="btnSubmit" type="button" value="@Resources.Language.Submit" />
        <input class="btn" id="btnCancel" type="button" value="@Resources.Language.Cancel" />
    </div>
    <div id="dialog"></div>


    @*            <style scoped>
                #example .k-timepicker {
                    vertical-align: middle;
                }

                #example h3 {
                    clear: both;
                }

                #example .code-sample {
                    width: 60%;
                    float:left;
                    margin-bottom: 20px;
                }

                #example .output {
                    width: 24%;
                    margin-left: 4%;
                    float:left;
                }
                
            </style>**@




    <script>

        $(document).ready(function () {

            $("#item.LinkImage").kendoTooltip({
                showOn: "click"
            });

            $("#panelbar").kendoPanelBar({
                expandMode: "multiple"
            });

            $(".tabstrip").kendoTabStrip({
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                }
            });

            $(".editor").kendoEditor({

                tools: ["bold", "italic", "underline", "justifyLeft", "justifyCenter", "justifyRight",
                    "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "viewHtml"],

            });

            $("#uploadAvatar").kendoUpload({
                localization: {
                    remove: "Remove",
                    uploadSelectedFiles: "Upload"
                },
                async: {
                    //saveUrl: "/Place/UploadAvatar",
                    //removeUrl: "/Place/RemoveAvatar",
                    saveUrl: '@Url.Action("UploadAvatarPlace", "file", new { ID = Model.dlPlace.ID })',
                    removeUrl: '@Url.Action("RemoveAvatarPlace", "file")',
                    autoUpload: false,
                    multiple: false,
                },
                select: onSelect,
                upload: onUpload,
                success: onUploadAvatarSuccess
            });

            $("#uploadImage").kendoUpload({
                localization: {
                    remove: "Remove",
                    uploadSelectedFiles: "Upload"
                },
                async: {
                    saveUrl: '@Url.Action("UploadImagePlace", "file")',
                    removeUrl: '@Url.Action("RemoveImagePlace", "file")',
                    autoUpload: false,
                },
                select: onSelect,
                upload: onUpload,
                success: onUploadSuccess
            });

            var validator = $("#panelbar").kendoValidator().data("kendoValidator");
            $('#btnSubmit').click(function () {
                $('#frmUpdateHotel').submit();
                //if (validator.validate()) {

                //} else {
                //    alert("Oops! There is invalid data in the form.");
                //}

            });

            $('#btnCancel').click(function () {
                $('#frmUpdateHotel')[0].reset();
            });


            ////DateTime Picker
            //function startChange() {
            //function startChange() {
            //    var startTime = start.value();

            //    if (startTime) {
            //        startTime = new Date(startTime);

            //        end.max(startTime);

            //        startTime.setMinutes(startTime.getMinutes() + this.options.interval);

            //        end.min(startTime);
            //        end.value(startTime);
            //    }
            //}

            ////init start timepicker
            //var start = $("#start").kendoTimePicker({
            //    change: startChange
            //}).data("kendoTimePicker");

            ////init end timepicker
            //var end = $("#end").kendoTimePicker().data("kendoTimePicker");

            ////define min/max range
            //start.min("8:00 AM");
            //start.max("6:00 PM");

            ////define min/max range
            //end.min("8:00 AM");
            //end.max("7:30 AM");
        });
        function onclickpicture(id) {
            var r = confirm("Confirm: Delete this Image(?)");
            if (r == true) {
                //$('div#imageName > input#' + id).hide();
                //$('div#imgPhotoPlace > .row > .span8 > .thumbnails >.span2').addClass('#' + id) = "hidden";
                $('div#imgPhotoPlace > .row > .span8 > .thumbnails >[id="' + id + '"]').hide();
                $('div#imgPhotoPlace > .row > .span8 > .thumbnails >[id="' + id + '"]').append('<input  name="hotelinfo.listImagePlace[' + id + '].Status" class="imagePlace" value="1" type="hidden"/>');
                //$('div#imgPhotoPlace > .row > .span8 > .thumbnails > .span2 >.thumbnail >.img').hide('#' + id);

                //$('img').visible('#'+id)='hidden';
            }
            else {
                //user pressed cancel. Do nothing
            }


        }
        function onfocuspicture(e) {
            var tooltip = $("#container").kendoTooltip({ position: "center" }).data("kendoTooltip");
            tooltip.show($("#target"));

        }

        function onSelect(e) {
            var files = e.files;

            // Check the extension of each file and abort the upload if it is not .jpg ,.png ,.bmp
            $.each(files, function () {
                //alert(this.extension);
                if ((this.extension == ".jpg") || (this.extension == ".png") || (this.extension == ".bmp")) {
                    return true;
                }
                else {
                    alert("it is not .jpg ,.png ,.bmp"); e.preventDefault();
                }
            });
        }
        function onUpload(e) {
            var files = e.files;

            // Check the extension of each file and abort the upload if it is not .jpg ,.png ,.bmp
            $.each(files, function () {
                if ((this.extension == ".jpg") || (this.extension == ".png") || (this.extension == ".bmp")) {
                    return true;
                }
                else {
                    alert("it is not .jpg ,.png ,.bmp");
                    e.preventDefault();
                }
            });
        }
        function onProgress(e) {
            // Array with information about the uploaded files
            var files = e.files;

            console.log(e.percentComplete);
        }

        function onUploadAvatarSuccess(e) {
            if (e.operation == "upload") {
                var files = e.response;
                $.each(files, function () {                  
                    var name = files.dataName.toString();
                    var id = name.replace('.', '');
                    $('#Avatar').val(name);
                    $('#imgPhotoAvatar > .row > .span8 > .thumbnails').append("<li class=\"span2\" id=" + id + " ><a class=thumbnail><img src=/Data/Avatar/place/" + name + " alt='' /></a></li>");
                    //$('#uploadAvatar').data('kendoUpload').disable();
                    e.files[0].name = name;
                });
            }

            if (e.operation == "remove") {
                $.each(e.files, function () {
                    $('#Avatar').val('');
                    var name = this.name.replace('.', '');
                    $('div#imgPhotoAvatar > .row > .span8 > .thumbnails > li').remove('#' + name);
                    // $('#uploadAvatar').data('kendoUpload').enable();
                });
            }
        }

        function onUploadSuccess(e) {
            var index = 0;
            if (e.operation == "upload") {
                var files = e.response;
                $.each(files, function () {
                    var name = files.dataname.toString();
                    var names = name.replace('.', '');
                    $('#imageName').append("<input id=" + names + " name='imagePlace' value=" + files.dataname + " type= hidden />")
                    $('#imgPhotoPlace> .row > .span8 > .thumbnails').append("<li class= 'span2 " + names + "' ><a class=thumbnail><img src=/Data/Images/place/" + files.dataname + " alt='' /></a></li>");
                    e.files[index].name = name;
                    index++;
                });
            }

            if (e.operation == "remove") {
                $.each(files, function () {
                    var name = this.name.replace(' ', '').replace('.', '');
                    $('div#imageName > input#' + name).remove();
                    $('div#imgPhotoPlace > .row > .span8 > .thumbnails > li').remove('.' + name)
                });
            }
        }


    </script>
</form>


<div>
    @Html.ActionLink("Back to List", "Index")
</div>

